P02: Style Guide

Code Syntax

General Coding

The naming convention must follows: single words must initially be lower case. If there is preceding word, each preceding word must be grammatically capitalized. This applies to all naming conventions such as: ID/class, file/folder names, and variables (exception for "P02_Company" folder name)

<div id="#single"></div>
<div class="precedingWordCapitalized"></div>

General Formatting

Every block, section, div, all list types, and every preceding child element must be indented and in a new line.

<section>
    <div>
        <p>New line for every block, section, div, and list, but exception for paragraph</p>
    </div>
</section>

Commenting

Comments must describe the purpose of a chunk/block of code. Each comment must indicate where the block of code begins and ends. Only comment when necessary, otherwise it is distracting.

<!-- Short comment for a section -->
    <...>
<!-- Short comment for a section end here --> <!--
    This is an example to demonstrate the purpose of this comment for a chunk/block of code.
    This is an example to demonstrate the purpose of this comment for a chunk/block of code.
-->

Interactive Elements

In-Text Link

CSS Selector:

.inTextLink

Sample Code:

<a href="#" class="in_text">in-text Link</a>

Rendered Element:

Example of in-text Link.

Navigation Button

CSS Selector:

.headerItem

Sample Code:

<a href="#" class="headerItem">Navigation Button</a>

Rendered Element:

Navigation Button

Submit and Reset Button

CSS Selector:

.button .buttonFill .buttonUnfill

Sample Code:

<button type="submit" name="submit" class="button buttonFill">Submit</button>
<button type="reset" name="reset" class="button buttonUnfill">Reset</button>

Rendered Element:

Text Input Field and Label

CSS Selector:

.formItem input[id] input[type=text]

Sample Code:

<form class="formContainer">
    <div class="formItem">
        <label for="formUsername">Username:</label>
        <input type="text" id="formUsername" placeholder="Username">
    </div>

    <div class="formItem">
        <label for="formPassword">Password:</label>
        <input type="password" id="formPassword" placeholder="Password">
    </div>
</form>

Rendered Element:

Text Styling

Headings

CSS Selector:

h1 h2 h3

Sample Code:

<h1>Heading level 1</h1>

Rendered Element:

Heading level 1

Heading level 2

Heading level 3

Paragraph

CSS Selector:

p

Sample Code:

<p>This is an example of a paragraph.</p>

Rendered Element:

This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph. This is an example of a paragraph.

Bulleted List

CSS Selector:

.bullettedList li

Sample Code:

<ul class="bullettedList">
    <li>bulletted list</li>
    <li>bulletted list</li>
    <li>bulletted list</li>
</ul>

Rendered Element:

  • bulletted list
  • bulletted list
  • bulletted list

Numbered List

CSS Selector:

ol.numberedList

Sample Code:

<ol class="numberedList">
    <li>numbered list</li>
    <li>numbered list</li>
    <li>numbered list</li>
</ol>

Rendered Element:

  1. numbered list
  2. numbered list
  3. numbered list

Combined Elements and Templates

Main Navigation Header

CSS Selector:

.headerContainer .headerItem .currentPage .brandLogo .navBar .floatLeft .floatRight

Sample Code:

<nav class="headerContainer">
    <div class="brandLogo headerItem floatLeft">
        <img src="img/file location" alt="image description">
    </div>

    <div class="navBar floatLeft">
        <a href="#link" class="headerItem currentPage">Home</a>
        <a href="#link" class="headerItem currentPage">Shop</a>
        <a href="#link" class="headerItem currentPage">News</a>
        <a href="#link" class="headerItem currentPage">Forums</a>
        <a href="#link" class="headerItem currentPage">About</a>
    </div>

    <div class="navBar floatRight">
        <a href="#link" class="headerItem currentPage">Cart</a>
        <a href="#link" class="headerItem currentPage">Account</a>
    </div>
</nav>

Rendered Element:

Main Navigation Footer

CSS Selector:

footer .footerContainer .containerWrapper .footerColumn .footerItem .brandLogo .copyRightText

Sample Code:

<footer>
    <div class="footerContainer">
        <div class="containerWrapper">
            <div class="brandLogo footerColumn">
                <a href="homeWithAccount.html">Rescue The Cephalopod</a>
            </div>

            <div class="containerColumn">
                <h3>Product</h3>
                <a href="shop.html" class="footerItem">Shop</a>
                <a href="shop.html" class="footerItem">Gift</a>
                <a href="shop.html" class="footerItem">Deals</a>
            </div>
        <p class="copyRightText centerAlign footerColumn">© 2017, Eva & Jameson | All Rights Reserved.</p>
    </div>
</footer>

Rendered Element:

Product Listing

CSS Selector:

.threeColumnGridContainer .threeGridColumnItem .columnGridImg .productList .captionInsideTop .captionPositionRight

Sample Code:

<div class="threeColumnGridContainer">
    <div class="threeGridColumnItem">
        <figure class="captionInsideTop captionPositionRight">
            <figcaption>product offers and deals</figcaption>
            <img class="columnGridImg" src="img/image location" alt="image description">
        </figure>

        <h4 class="subjectTitle productList">Product Name</h4>
        <p class="subjectInfo productList"> <strong> $old product price</strong> &nbsp; $new product price</p>
</div>

Rendered Element:

Ice cream Octopus

$25.00

LIMITED

Giant Squid

$35.00

40% OFF

Top Hat Mustache Octopus Bundle

$50.00   $30.00

Grid Structure

CSS Selector:

.colGrid .colItem p.colItemName

Sample Code:

<div class="colGrid">
    <div class="colItem">
        <p class="colItemName"> 1/3 column </p>
        <p class="colItemName"> 1/3 column </p>
        <p class="colItemName"> 1/3 column </p>
    </div>
</div>

Rendered Element:

1/1 column

1/2 column

1/2 column

1/3 column

1/3 column

1/3 column

1/6

1/6

1/6

1/6

1/6

1/6

Colour Scheme

CSS Selector:

.colGrid .colorSwatchBox .colItem .colorSwatchItem .colItemName .cw1

Sample Code:

<div class="colGrid colorSwatchBox">
    <div class="colItem colorSwatchItem">
        <p class="colItemName cw1">color swatch 1</p>
    </div>

    <div class="colItem colorSwatchItem">
        <p class="colItemName cw2">color swatch 2</p>
    </div>

    <div class="colItem colorSwatchItem">
        <p class="colItemName cw3">color swatch 3</p>
    </div>
</div>

Rendered Element:

Primary Colors

#F7941D

#0A4378

#A1C2DB

Secondary Colors

#333333

#666666

#999999

#DDDDDD

#84D8FF

#C1DAE5

#FFFFFF

background Colors

#020309

#gradient